<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/colleges_question.css">
    <link rel="stylesheet" href="/css/tabbar.css">
    <script src="/js/base.js"></script>
  </head>
  <body>
    <div class="colleges_question">
      <div class="list">
        <div class="list_cell" id="question-0" style="display: block;">
          <span class="list_index">01</span>
          <h4>汽车贴膜是指，车辆前后风挡玻璃、侧窗玻璃以及天窗上贴上一层薄膜状物体，用于( ). </h4>
          <div class="select">
            <label class="option" for="answer-0-1">
              <input type="radio" id="answer-0-1" name="question-0" onchange="selectaAnswer(0, 'A', 0, event)">
              <span>A.在某些层面达到节省燃油消耗的功效</span>
            </label>
            <label class="option" for="answer-0-2">
              <input type="radio" id="answer-0-2" name="question-0" onchange="selectaAnswer(0, 'B', 0, event)">
              <span>B.可以减少车内物品以及人员因紫外线照 射造成的损伤</span>
            </label>
            <label class="option" for="answer-0-3">
              <input type="radio" id="answer-0-3" name="question-0" onchange="selectaAnswer(0, 'C', 0, event)"> 
              <span>C.增加车辆的美观度</span>
            </label>
            <label class="option" for="answer-0-4">
              <input type="radio" id="answer-0-4" name="question-0" onchange="selectaAnswer(0, 'D', 0, event)">
              <span> D.太阳膜的作用分、太阳膜的品牌分析</span>
            </label>
          </div>
        </div>
        <div class="list_cell" id="question-1" style="display: none;">
          <span class="list_index">02</span>
          <h4>汽车贴膜是指，车辆前后风挡玻璃、侧窗玻璃以及天窗上贴上一层薄膜状物体，用于( ). </h4>
          <div class="select">
            <label class="option" for="answer-1-1">
              <input type="checkbox" id="answer-1-1" name="question-1" onchange="selectaAnswer(1, 'A', 1, event)">
              <span>A.在某些层面达到节省燃油消耗的功效</span>
            </label>
            <label class="option" for="answer-1-2">
              <input type="checkbox" id="answer-1-2" name="question-1" onchange="selectaAnswer(1, 'B', 1, event)">
              <span>B.可以减少车内物品以及人员因紫外线照 射造成的损伤</span>
            </label>
            <label class="option" for="answer-1-3">
              <input type="checkbox" id="answer-1-3" name="question-1" onchange="selectaAnswer(1, 'C', 1, event)"> 
              <span>C.增加车辆的美观度</span>
            </label>
            <label class="option" for="answer-1-4">
              <input type="checkbox" id="answer-1-4" name="question-1" onchange="selectaAnswer(1, 'D', 1, event)">
              <span> D.太阳膜的作用分、太阳膜的品牌分析</span>
            </label>
          </div>
        </div>
      </div>
      <div class="action">
        <button class="btn" id="next-question" style="display: inline-block;">下一题</button>
        <button class="btn" id="pre-question" style="display: none;">上一题</button>
        <button class="btn" id="submit-question">完成交卷</button>
        <span class="total"><span id="current_index">5</span> / 20</span>
      </div>
      <div class="time">
        Time: <span id="time"></span>
      </div>
      <div class="modal" id="modal">
        <!-- <div class="modal_bg" id="modal_bg"></div> -->
        <div class="modal_content pass" id="modal_pass">
          <h1 class="score">75<span>分</span></h1>
          <p class="tip">恭喜你! 成功晋级</p>
          <p class="count">答对<span>15</span>题，答错<span>5</span>题</p>
          <a class="btn">查看答案</a>
        </div>
        <div class="modal_content fail" id="modal_fail">
          <h1 class="score">75<span>分</span></h1>
          <p class="tip">非常抱歉,未能晋级</p>
          <p class="count">答对<span>15</span>题，答错<span>5</span>题</p>
          <a class="btn">继续学习</a>
        </div>
      </div>
      <div class="tabbar">
        <div class="tabbar_cell">
          <div class="tabbar_icon home">
            <img src="/assets/tabbar_icon_home.png">
            <img src="/assets/tabbar_icon_home_active.png">
          </div>
          <div class="tabbar_name">首页</div>
        </div>
        <div class="tabbar_cell active">
          <div class="tabbar_icon college">
            <img src="/assets/tabbar_icon_college.png">
            <img src="/assets/tabbar_icon_college_active.png">
          </div>
          <div class="tabbar_name">课程</div>
        </div>
        <div class="tabbar_cell">
          <div class="tabbar_icon mine">
            <img src="/assets/tabbar_icon_mine.png">
            <img src="/assets/tabbar_icon_mine_active.png">
          </div>
          <div class="tabbar_name">我的</div>
        </div>
      </div>
    </div>
    <script>
      /*
      * 选择答案
      * @param {Number} 当前问题序号
      * @param {String} 当前选择答案的值
      * @param {Number} 当前问题的类型 0为单选 1为多选
      * @param {Event} 当前dom事件
      */
      var answers = []
      function selectaAnswer (index, value, type, event) {
        if (type === 0) {
          answers[index] = value
        } else {
          answers[index] ?  null : answers[index] = []
          if (event.target.checked) {
            answers[index].push(value)
          } else {
            answers[index] = answers[index].filter(i => i != value)
          }
        }
        console.log(answers)
      }

      /*
      * 下一题
      * @param {Number} 问题总数
      */
      function changeQuestion (total) {
        var current_index = 0
        document.getElementById('next-question').addEventListener('click', function(){
          if (current_index < total - 1) {
            current_index += 1
            showQuestion('question-' + current_index)
            if (current_index === total - 1) {
              this.style.display = 'none'
              document.getElementById('pre-question').style.display = 'inline-block'
              document.getElementById('submit-question').style.display = 'inline-block'
            }
          }
        })

        document.getElementById('pre-question').addEventListener('click', function(){
          if (current_index > 0) {
            current_index -= 1
            showQuestion('question-' + current_index)
            if (current_index === 0) {
              this.style.display = 'none'
              document.getElementById('next-question').style.display = 'inline-block'
            }
          }
        })

        // 显示当前问题
        function showQuestion (id) {
          Array.from(document.querySelectorAll('.list_cell')).forEach(function(dom){
            dom.style.display = 'none'
          })
          document.getElementById(id).style.display = 'block'
        }
      }
      changeQuestion(2)

      /*
      * 交卷
      * @param {Number} 问题总数
      */
      function submitAnswer () {
        document.getElementById('submit-question').addEventListener('click', function () {
          // 分数
          var score = 90
          document.getElementById('modal').style.display = 'flex'
          if (score > 80) {
            document.getElementById('modal_pass').style.display = 'block'
          } else {
            document.getElementById('modal_fail').style.display = 'block'
          }
        })

        document.getElementById('modal_pass').addEventListener('click', function (e) {
          e.stopPropagation()
        })

        document.getElementById('modal_fail').addEventListener('click', function (e) {
          e.stopPropagation()
        })

        document.getElementById('modal').addEventListener('click', function (e) {
          this.style.display = 'none'
          document.getElementById('modal_pass').style.display = 'none'
          document.getElementById('modal_fail').style.display = 'none'
        })

      }
      submitAnswer()
      
      /*
      * 倒计时
      * @param {Number} 秒
      */
      function countTime(s) {
        var seconds = s

        function setTxt (seconds) {
          var date = new Date(seconds * 1000 - 8 * 3600 * 1000)
          document.getElementById('time').innerText = formatTime(date)
        }

        function count() {
          seconds -= 1
          setTimeout(function(){
            if (seconds >= 0) {
              setTxt(seconds)
              count()
            } else {
              alert('作答时间到')
            }
          }, 1000)
        }

        setTxt(seconds)
        count()
      }

      countTime(600)
    </script>
  </body>
</html>
